<template>
  <div class="demo-classicPage-repairRecord" >
      <Form ref="repairRecordForm" :label-width="100" label-position="left" :model="formData"  :rules="ruleValidate" style="margin-left: 100px;margin-top: 40px">
          <span style="color: #A8AFB2">基本信息</span>  <i @click=" editFlag = true" style="float: right;cursor: pointer" v-if="!editFlag && !result" class="iconfont icon-edit"></i>
          <Form-item label="车牌号"  prop="vehicleId">
              <Select v-if="editFlag" placeholder="输入、选择车牌号"  v-model="formData.vehicleId" class="input-style" >
                  <Option  v-for="item in VEHICLE" :value="item.value" :key="item.key">{{item.desc}}</Option>
              </Select>
              <span v-if="!editFlag" class="span-style">{{dictionaryIdToDesc(VEHICLE,formData.vehicleId,'value','desc')}}</span>
          </Form-item>
          <Form-item label="行程历程(km)"  prop="vehicleMiles">
              <Input v-if="editFlag"  placeholder="输入里程数" v-model="formData.vehicleMiles" class="input-style"></Input>
              <span v-if="!editFlag"  class="span-style">{{formData.vehicleMiles}}</span>
          </Form-item>
          <Form-item label="维修厂名称" prop="mtcshopId" >
              <Select v-if="editFlag" filterable  v-model="formData.mtcshopId"  placeholder="输入、选择维修厂" class="input-style">
                  <Option  v-for="item in MTCSHOP" :value="item.value"  :key="item.key">{{item.desc}}</Option>
              </Select>
              <span v-if="!editFlag"  class="span-style">{{dictionaryIdToDesc(MTCSHOP,formData.mtcshopId,'value','desc')}}</span>
          </Form-item>
          <Form-item label="维保类型" prop="mtcKind">
              <Select v-if="editFlag" placeholder="输入、选择维保类型"  v-model="formData.mtcKind" class="input-style" style="width: 65px">
                  <Option  v-for="item in MTCKIND" :value="item.value" :key="item.key">{{item.desc}}</Option>
              </Select>
              <span v-if="!editFlag"  class="span-style">{{dictionaryIdToDesc(MTCKIND,formData.mtcKind,'value','desc')}}</span>
              <Select  placeholder="输入、选择保养类型" v-model="formData.mtcType"  v-if="formData.mtcKind == 1 && editFlag" class="input-style" style="width: 180px">
                  <Option  v-for="item in MTCTYPE2" :value="item.value" :key="new Date().getTime()" >{{item.desc}}</Option>
              </Select>
              <span v-if="!editFlag && formData.mtcKind == 1"  class="span-style">{{dictionaryIdToDesc(MTCTYPE2,formData.mtcType,'value','desc')}}</span>
              <Select placeholder="输入、选择维修类型"  v-model="formData.mtcType" v-if="formData.mtcKind == 2 && editFlag"  class="input-style" style="width: 180px">
                  <Option  v-for="item in MTCTYPE1" :value="item.value" :key="new Date().getTime()">{{item.desc}}</Option>
              </Select>
              <span v-if="!editFlag && formData.mtcKind == 2 "  class="span-style">{{dictionaryIdToDesc(MTCTYPE1,formData.mtcType,'value','desc')}}</span>
          </Form-item>
          <Form-item label="维保状态" prop="status">
              <RadioGroup v-if="editFlag" v-model="formData.status" type="button">
                  <Radio v-for="item in STATUS"  :label="item.value" :key="item.key">{{item.desc}}</Radio>
              </RadioGroup>
              <span v-if="!editFlag"  class="span-style">{{dictionaryIdToDesc(STATUS,formData.status,'value','desc')}}</span>
          </Form-item>
          <Form-item label="维保开始时间" prop="sendRepairTime">
              <DatePicker v-if="editFlag" :format="'yyyy-MM-dd'" placeholder="请选择维保开始时间" type="date" v-model="formData.sendRepairTime" class="input-style"></DatePicker>
              <span v-if="!editFlag"  class="span-style">{{formatDate(formData.sendRepairTime)}}</span>
          </Form-item>
          <Form-item label="维保结束时间" prop="handVehicleTime">
              <DatePicker v-if="editFlag" :format="'yyyy-MM-dd'" placeholder="请选择维保结束时间" type="date"  v-model="formData.handVehicleTime" class="input-style"></DatePicker>
              <span v-if="!editFlag"  class="span-style">{{formatDate(formData.handVehicleTime)}}</span>
          </Form-item>
          <Form-item label="维修费用(元)"  prop="money">
              <Input v-if="editFlag"  placeholder="请输入实际费用" v-model="formData.money" class="input-style"></Input>
              <span v-if="!editFlag"  class="span-style">{{formData.money}}</span>
          </Form-item>
          <Form-item label="司机" prop="driver">
          <Input v-if="editFlag" placeholder="姓名" v-model="formData.driverId" class="input-style" style="width: 100px"></Input>
              <span v-if="!editFlag"  class="span-style">{{formData.driverId}}</span>
          <Input v-if="editFlag" placeholder="手机号码" v-model="formData.driverPhone" class="input-style" style="width: 145px"></Input>
              <span v-if="!editFlag"  class="span-style">(电话{{formData.driverPhone}})</span>
          </Form-item>
          <Form-item label="备注">
              <Input v-if="editFlag" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."  v-model="formData.remark" class="input-style" style="width: 400px;"></Input>
              <span v-if="!editFlag"  class="span-style">{{formData.remark}}</span>
          </Form-item>
          <FormItem label="  "  v-if="editFlag">
              <Button type="primary" @click="handleSubmit('repairRecordForm')"  style="">确定</Button>
              <Button type="warning" @click="onCancelEdit" style="margin-left: 10px;">取消</Button>
          </FormItem>

          <div class="options" v-if="formData.status == 2 && !editFlag && result == false">
              <span class="state-icon zlst-icon icon-bg-approveing " style="float: left;margin-top: 20px;margin-left: 20px">
                <span class="iconfont icon-tool"></span>
              </span>
              <ul style="height: 50px;width: 200px;line-height: 25px;float: left;margin-top: 20px;margin-left: 8px">
                  <li style="font-size: 16px">{{dictionaryIdToDesc(VEHICLE,formData.vehicleId,'value','desc')}}</li>
                  <li style="color: #A8AFB2">已完成维保</li>
              </ul>
              <Button type="primary" style="float: right;margin-top: 30px" @click="result = true">申请审核</Button>
          </div>
          <div v-if="result" class="options" >
              <div style="height: 10px"></div>
              <span style="margin-top: 10px;color: #A8AFB2;margin-left: 10px;width: 80px">审批人:{{people}}</span><span style="color: #A8AFB2;">&nbsp;&nbsp;审批时间:{{getTime()}}</span>
              <table style="margin-left: 8px" >
                  <tr><td style="width: 80px" >审批意见</td> <tb> 不通过</tb></tr>
                  <tr><td style="width: 80px">备注</td><td>单据费用与统计费用不合，请重新统计数据后再走审批流程</td></tr>
              </table>
          </div>

      </Form>
  </div>
</template>
<script>
export default {
  data () {
      const validateMtcKind = (rule, value, callback) => {
          if(this.formData.mtcKind == '' ) {
              callback(new Error('保养类型不能为空'))
          }else  if(this.formData.mtcKind == '2' && this.formData.mtcType == '') {
              callback(new Error('维修类型不能为空'))
          }else  if(this.formData.mtcKind == '1' && this.formData.mtcType == '') {
              callback(new Error('保养类型不能为空'))
          }else{
              callback()
          }
      }
      const validateDriver = (rule, value, callback) => {
          if(this.formData.driverId == '') {
              callback(new Error('司机姓名不能为空'))
          }else if(this.formData.driverPhone == '') {
              callback(new Error('手机号码不能为空'))
          }else{
              callback()
          }
      }
    return {
        VEHICLE: [{value: '1', desc: '湘A 888888'}, {value: '2', desc: '湘B 000000'}],
        MTCSHOP: [{value: '1', desc: '湘天维修厂'}, {value: '2', desc: '藏地维修厂'}],
        MTCKIND: [{value: '1', desc: '保养'}, {value: '2', desc: '维修'}],
        MTCTYPE1:[{value: 'a', desc: '小维修'}, {value: 'b', desc: '大维修'}, {value: 'c', desc: '事故维修'}],
        MTCTYPE2:[{value: '4', desc: '小保养'}, {value: '5', desc: '大保养'}],
        STATUS: [{value: '1', desc: '维保中'}, {value: '2', desc: '已完成'}],
        editFlag: true,
        result: false,
        people:'张小丫',
        formData: {
            vehicleId: '1', // 车辆id
            vehicleMiles: '1100', // 行车里程
            mtcKind: '1', // 维保类型
            mtcType: '4', //维修/保养类型
            status: '1', //保养类型状态 1 为维保中  1为维保完成
            mtcshopId: '1',// 维修厂id
            sendRepairTime:'2017-10-18', // 维保开始时间
            handVehicleTime: '2017-10-20', // 维保结束时间
            driverId: 'xxx', // 司机id
            driverPhone:'13600000001', // 手机
            money: '130',
            remark: '这里是备注', //备注

        },
        ruleValidate : {
            vehicleId: [
                { required: true, message: '请选择车牌号', trigger: 'change' }
            ],
            vehicleMiles: [
                { required: true, message: '行车里程不可为空', trigger: 'change' }
            ],
            mtcshopId: [
                { required: true, message: '请选择维修厂', trigger: 'change' }
            ],
            mtcKind: [
                { required: true, validator: validateMtcKind, trigger: 'change' }
            ],
            driver: [
                { required: true, validator: validateDriver, trigger: 'change' }
            ],
            status: [
                { required: true, message: '请选择维保状态', trigger: 'change' }
            ],
            sendRepairTime: [
                { required: true,  message: '请选择开始日期', trigger: 'blur' }
            ],
            handVehicleTime: [
                { required: true,  message: '请选择结束日期', trigger: 'blur' }
            ],
            money: [
                { required: true,  message: '请输入实际费用', trigger: 'change' }
            ]
        }
    }
  },
  computed: {
      formValidate: function () {
          if (this.editFlag) {
              return this.ruleValidate
          }else{
              return {}
          }
      }
  },
  methods: {
      getTime () {
          return new Date().format('yyyy-MM-dd HH:mm:ss')
      },
      handleSubmit: function(name) {

          if(this.formData.sendRepairTime){
              this.formData.sendRepairTime = new Date(this.formData.sendRepairTime).format('yyyy-MM-dd')
          }
          if(this.formData.handVehicleTime){
              this.formData.handVehicleTime = new Date(this.formData.handVehicleTime).format('yyyy-MM-dd')
          }
          this.$refs[name].validate((valid) => {
              if (valid) {
                  this.$Message.success('提交成功')
                  this.onCancelEdit()
              }else{
                  this.$Message.error('提交失败')
              }
          })
      },
      onCancelEdit () {
          this.$Message.info('取消编辑')
          this.editFlag = false
      },
      dictionaryIdToDesc(dictionaryArr, id, filedId, filedName){
          for(var i = 0;i<dictionaryArr.length;i++){
              if(dictionaryArr[i][filedId] == id){
                  return dictionaryArr[i][filedName]
              }
          }
      },
      formatDate(date, templet){
          if(!templet){
              templet = 'yyyy-MM-dd'
          }
          return new Date(date).format(templet)
      }
  },
  mounted () {

  },
  watch: {

  }

}
</script>
<style  scoped lang="scss">
    .demo-classicPage-repairRecord {
        min-width: 900px;
        width: 900px;
        .input-style {
            width: 250px;
        }
        .span-style {
            color: #A8AFB2;
        }
        .icon-tool {
            font-size: 30px;
        }
        .state-icon {
            width: 50px;
            height: 50px;
            line-height: 50px;
            border: none;
            text-align: center;
        }
        .icon-bg-approveing {
            background: rgb(59,192,175);
        }
        .options {
            height: 100px;
            border-top: 1px #A8AFB2 dashed;
        }

    }
</style>
